<template>
  <div class="home">
    主页-轮播图、宫格、商品列表布局

    <div v-for="prod in recommend" :key="prod.id">
      {{ prod.id }} - {{ prod.title }} - {{ prod.price }} -
      <!-- <router-link :to="`/detail?id=${prod.id}&price=${prod.price}`">跳转到详情页面</router-link> -->
      <router-link :to="{path: '/detail', query: {id: prod.id, title: prod.title}}">跳转到详情页面</router-link>
    </div>

    <hr>
    <div>
      <div v-for="user in users" :key="user.username">
        用户名: {{ user.username }} -
        <!-- to 属性绑定对象时，path 与 params 不能共存，当同时出现时，会自动忽略 params -->
        <!-- <RouterLink :to="{path: '/user', params: {username: user.username}}">查看用户信息</RouterLink> -->
        <!-- 要进行 to 对象属性的绑定，同是传递 params 参数，则需要结合 name(命名路由) 一起使用 -->
        <RouterLink :to="{name: 'user', params: {username: user.username}}">查看用户信息</RouterLink>

        <!-- <RouterLink :to="`/user/${user.username}`">查看用户信息</RouterLink> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      recommend: Array(6).fill(null).map((item, index) => ({
        id: index + 1,
        title: '商品标题' + (index + 1),
        price: (Math.random() * 99 + 9.9).toFixed(2)
      })),
      users: [
        { username: 'jhony', },
        { username: 'tommy', },
        { username: 'catty', },
      ]
    }
  }
}
</script>

<style scoped>

</style>
